

.subscription-length-picker {
	&__header {
		margin-bottom: 10px;
		flex-basis: 100%;
		font-size: $font-body;
	}

	&__options {
		display: flex;
		align-items: flex-start;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	&__option-container {
		flex-basis: calc( 100% );

		&:not( :first-child ) {
			margin-top: 8px;
		}

		@include breakpoint-deprecated( '>960px' ) {
			&:first-child:nth-last-child( 2 ),
			&:first-child:nth-last-child( 2 ) ~ div {
				flex-basis: calc( 50% - 10px );
				margin-top: 0;
			}
		}
	}
}

.subscription-length-picker__option {
	$padding-size: 18px;

	display: flex;
	width: 100%;
	cursor: pointer;

	padding: $padding-size;
	border-radius: 2px;

	background: var( --color-surface );

	.subscription-length-picker__option-radio-wrapper {
		width: 21px;
		margin-right: 12px;
	}

	.subscription-length-picker__option-radio {
		width: 21px;
		height: 21px;

		&:checked::before {
			width: 13px;
			height: 13px;
		}
	}

	.subscription-length-picker__option-content {
		flex-grow: 1;
	}
	.subscription-length-picker__option-header,
	.subscription-length-picker__option-description {
		width: 100%;
	}

	.subscription-length-picker__option-term,
	.subscription-length-picker__option-price,
	.subscription-length-picker__option-discount,
	.subscription-length-picker__option-side-note,
	.subscription-length-picker__option-old-price,
	.subscription-length-picker__option-credit-info,
	.subscription-length-picker__option-description {
		display: inline-block;
		vertical-align: middle;
	}

	.subscription-length-picker__option-header {
		line-height: 24px;
	}

	.subscription-length-picker__option-term {
		display: inline-block;
		font-size: $font-title-medium;
		line-height: 24px;
	}

	.subscription-length-picker__option-discount {
		margin-left: 10px;
	}

	.subscription-length-picker__option-description {
		font-size: $font-body;
		margin-top: 2px;
	}

	.subscription-length-picker__option-credit-info {
		float: right;
		color: var( --color-text-subtle );
	}

	.subscription-length-picker__option-old-price {
		position: relative;
		display: inline-block;
		color: var( --color-neutral-40 );
		margin-right: 5px;
		text-decoration: line-through;
	}

	.subscription-length-picker__option-price {
		display: inline-block;
		color: var( --color-neutral-70 );
	}

	.subscription-length-picker__option-side-note {
		color: var( --color-text-subtle );
		margin-left: 5px;
	}

	.subscription-length-picker__option-tax {
		color: var( --color-text-subtle );
		vertical-align: super;
		font-size: $font-body-extra-small;
		margin-left: 1px;
	}

	&:not( .is-active ) {
		border: 1px solid var( --color-neutral-light );
		padding: $padding-size + 2px;
	}

	&.is-active {
		border: 3px solid var( --color-primary );
		.subscription-length-picker__option-credit-info {
			color: var( --color-success );
		}
	}
}
